<template>
	<view class="school_view">
		<view class="search_boxs_sy">
			<view class="search_box">
				<uni-search-bar  radius="50" placeholder="输入学校名称查询" clearButton="auto" cancelButton="none" v-model="searchValue" class="search_input"/>
				<view class="c_btn" @click="searchQuery">
					搜索
				</view>
			</view>
			<view class="shaixuan2">
				<view class="pt1">
					学校列表（{{dataList.length}}所）
				</view>
				<view class="pt2" @click="searchHandle('type')">
					<span  class="c_text">{{schoolTypeSel == -1 ? '学校类型':(schoolType[schoolTypeSel] && schoolType[schoolTypeSel].name)}}</span> <span class="c_sanj" :class="showType == 1?'active':''"></span>
				</view>
				<view class="pt2" @click="searchHandle('xuequ')">
					<span  class="c_text">{{schoolListSel == -1 ? '所属学区':(schoolList[schoolListSel] && schoolList[schoolListSel].name)}}</span> <span class="c_sanj" :class="showType == 2?'active':''"></span>
				</view>
			</view>
			<view class="c_xuanxiang" v-if="isShowSc2">
				<template v-if="showType == 1">
					
					<view class="c_xuanxiang_neirong">
						<view class="c_item_xx" @click="changeSearch(-1,'type')">
							全部
						</view>
						<view class="c_item_xx" v-for="(item,key) in schoolType" @click="changeSearch(key,'type')">
							{{item.name}}
						</view>
					</view>
				</template>
				<template v-if="showType == 2">
					<view class="c_xuanxiang_neirong">
						<view class="c_item_xx" @click="changeSearch(-1,'area')">
							全部
						</view>
						<view class="c_item_xx" v-for="(item,key) in schoolList" @click="changeSearch(key,'area')">
							{{item.name}}
						</view>
					</view>
					
				</template>
			</view>
		</view>
		<view class="sc_list" v-if="dataList.length > 0">
			<view class="sc_item_view">
				<sy-school1 :cItem="cItem" v-for="(cItem,key) in dataList" @showDetail="toDetail" :key="key"></sy-school1>
			</view>
		</view>
		<view class="pging_sy" v-if="dataList.length == 0">
			<image src="../../static/nopage.png" class="doing_img"></image>
			<view class="do_text">
				搜索无结果！
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchValue:"",
				schoolList:[],
				schoolListSel:-1,
				schoolType:[],
				schoolTypeSel:-1,
				isShowSc2:false,
				showType:0,
				dataList:[],
				page:1,
				isCanUp:true,
				
			};
		},
		onLoad() {
			this.getSchoolTyle();
			this.getData();
		},
		onPullDownRefresh(){
			this.dataList = [];
			this.page = 1;
			this.isCanUp = true;
			this.getData();
			setTimeout(()=>{
				uni.stopPullDownRefresh() 
			},1000)
		},
		onReachBottom(){
		    let that = this
		    //每次上拉加载的数据比上一次多十个
			if(this.isCanUp){
				++this.page;
				setTimeout(()=>{
					that.getData()
				},200)
			}
		},
		methods:{
			changeSearch(key,type){
				console.log(key,type,"key,type")
				if(type === 'area'){
					this.schoolListSel = key
				}
				if(type === 'type'){
					this.schoolTypeSel = key
				}
				this.showType = 0;
				this.isShowSc2 = false;
				this.getData();
			},
			getSchoolTyle(){
				this.$queryApi("post","/school.school/type", {}, res => {
					console.log(res,"学区类型")
					this.schoolList = res.data.area;
					this.schoolType = res.data.type;
				},"","noMsg")
			},
			getData(){
				uni.showLoading()
				console.log(this.schoolTypeSel,"this.schoolTypeSel")
				let type = this.schoolTypeSel > -1 ?this.schoolType[this.schoolTypeSel].id:"";
				let area = this.schoolListSel > -1 ?this.schoolList[this.schoolListSel].id:"";
				
				this.$queryApi("post","/school.school/index", {
					pagesize:10,
					page:this.page,
					type,
					area,
					keyword:this.searchValue
				}, res => {
					console.log(res,"学校")
				
					let kongList = res.data.data;
					if(this.page == 1){
						this.dataList =  kongList;
					}else{
						this.dataList =  [...this.dataList,...kongList];
					}
					if(this.page >= res.data.total_page){
						this.isCanUp = false
					}else{
						this.isCanUp = true
					}
					setTimeout(()=>{
						uni.hideLoading()
					},500)
				},"","noMsg")
			},
			toDetail(cItem){
				console.log(cItem,"---")
				uni.navigateTo({
					url:"/pages/school/schoolDetail?id="+cItem.id
				})
			},
			searchQuery() {
				this.page = 1;
				this.getData();
			},
			searchHandle(type){
				
				if(type == 'type'){
					if(this.showType != 1){
						this.showType = 1;
						this.isShowSc2 = true;
					}else{
						this.showType = 0;
						this.isShowSc2 = false;
					}
				}
				if(type == 'xuequ'){
					if(this.showType != 2){
						this.showType = 2;
						this.isShowSc2 = true;
					}else{
						this.showType = 0;
						this.isShowSc2 = false;
					}
				}
			}
		}
	}
</script>

<style lang="scss">
.school_view{
	background-color: #fff;
	color: #3D3D3D;
	min-height: 100vh;
	box-sizing: border-box;
	.sc_item_view{
		flex-direction: column;
		padding: 200rpx 30rpx 60rpx;
	}
	
}
</style>
